<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表页</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/list.css">
</head>
<body>
    <!-- 顶部快捷导航栏 -- start -->
    <div class="shortcut">
        <!-- 版心div -->
        <div class="w">
            <!-- 左侧登陆注册 -->
            <div class="fl">
                优购商城欢迎您！
                <a href="#">登录</a> 
                <a href="#">免费注册</a>
            </div>

            <!-- 右侧分类链接 -->
            <div class="fr">
                <a href="#">我的订单</a>
                <span>|</span>
                <a href="#">我的优购</a>
                <span>|</span>
                <a href="#">会员</a>
                <span>|</span>
                <a href="#">企业采购</a>
                <span>|</span>
                <a href="#">客户服务</a>
                <span>|</span>
                <a href="#">网站导航</a>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航栏 -- end -->

    <!-- Logo\搜索\购物车模块 -- start -->
    <div class="header w">
        <!-- Logo区 -->
        <h1 class="logo">
            <a href="http://www.baidu.com" title="优购商城">优购商城</a>
        </h1>

        <!-- 搜索区 -->
        <div class="search">
            <input type="text" placeholder="农药皮肤大出血">
            <button><span class="iconfont icon-fangdajing"></span></button>
        </div>

        <!-- 热门关键词 -->
        <div class="hotwords">
            <a href="#" class="current">新款连衣裙</a>
            <a href="#">四件套</a>
            <a href="#">潮流T恤</a>
            <a href="#">时尚女鞋</a>
            <a href="#">短裤</a>
            <a href="#">半身裙</a>
            <a href="#">男士外套</a>
            <a href="#">墙纸</a>
        </div>

        <!-- 购物车 -->
        <div class="cart">
            <i class="iconfont icon-qicheqianlian-select-copy"></i>
            我的购物车
            <i class="count">18</i>
        </div>
    </div>
    <!-- Logo\搜索\购物车模块 -- end -->

    <!-- Nav导航栏 -- start -->
    <div class="nav">
        <!-- 版心-->
        <div class="w">
            <!-- 左侧商品分类 -->
            <div class="dropdown fl">
                <div class="dt">全部商品分类</div>
                <div class="dd" style="display: none;">
                    <ul>
                        <li class="item"><a href="#">家用电器</a><span>&gt;</span></li>
                        <li class="item"><a href="#">手机 、 数码 、 通信</a><span>&gt;</span></li>
                        <li class="item"><a href="#">电脑、办公</a><span>&gt;</span></li>
                        <li class="item"><a href="#">家居、家具、家装、厨具</a><span>&gt;</span></li>
                        <li class="item"><a href="#">男装、女装、童装、内衣</a><span>&gt;</span></li>
                        <li class="item"><a href="#">个户化妆、清洁用品、宠物</a><span>&gt;</span></li>
                        <li class="item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a><span>&gt;</span></li>
                        <li class="item"><a href="#">运动户外、钟表</a><span>&gt;</span></li>
                        <li class="item"><a href="#">汽车、汽车用品</a><span>&gt;</span></li>
                        <li class="item"><a href="#">母婴、玩具乐器</a><span>&gt;</span></li>
                        <li class="item"><a href="#">食品、酒类、生鲜、特产</a><span>&gt;</span></li>
                        <li class="item"><a href="#">医药保健</a><span>&gt;</span></li>
                        <li class="item"><a href="#">图书、音像、电子书</a><span>&gt;</span></li>
                        <li class="item"><a href="#">彩票、旅行、充值、票务</a><span>&gt;</span></li>
                        <li class="item"><a href="#">理财、众筹、白条、保险</a><span>&gt;</span></li>
                    </ul>
                </div>
            </div>
            <!-- 右侧导航栏 -->
            <div class="navitems fl">
                <a href="#">潮服饰</a>
                <a href="#">美妆馆</a>
                <a href="#">电玩街</a>
                <a href="#">电器城</a>
                <a href="#">家世界</a>
                <a href="#">母婴区</a>
                <a href="#">会员专享</a>
            </div>
        </div>
    </div>
    <!-- Nav导航栏 -- end -->

    <div class="list-body">
        <div class="title w">
            全部结果 > <b>"键盘"</b>
        </div>
        <!-- 查询筛选条件 开始 -->
        <table class="w" >
            <tr class="brand">
                <td><b>品牌：</b></td>
                <td>
                    <ul>
                        <li><a href="#"><img src="./img/brand/1.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/2.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/3.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/4.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/5.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/6.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/7.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/8.jpg" /></a></li>
                        <li><a href="#"><img src="./img/brand/9.jpg" /></a></li>
                    </ul>
                </td>
            </tr>
            <tr class="link">
                <td><b>链接方式：</b></td>
                <td>
                    <ul>
                        <li><a href="#">蓝牙</a></li>
                        <li><a href="#">有线</a></li>
                        <li><a href="#">无线</a></li>
                        <li><a href="#">2.4G</a></li>
                    </ul>
                </td>
            </tr>
            <tr class="type">
                <td><b>类型：</b></td>
                <td>
                    <ul>
                        <li><a href="">青轴</a></li>
                        <li><a href="">黑轴</a></li>
                        <li><a href="">茶轴</a></li>
                        <li><a href="">红轴</a></li>
                        <li><a href="">静电</a></li>
                        <li><a href="">容轴</a></li>
                    </ul>
                </td>
            </tr>
        </table>
        <!-- 查询筛选条件 结束 -->

        <!-- 查询结果列表 开始 -->
        <div class="result-container w clearfix">
            <div class="recommend fl">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/recommend/1.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/recommend/2.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/recommend/3.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="goods-list fr">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/1.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/2.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/3.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/4.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/5.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/6.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/7.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/8.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/1.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/2.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/3.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/4.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/5.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/6.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/7.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/goods-list/8.jpg" alt="">
                            <p class="price">￥318.00</p>
                            <div class="title">K8蓝牙双模机械键盘 87键背光茶轴无线键盘 Mac/iPad键盘 键盘机械 蓝牙键盘 键盘无线</div>
                            <div class="comm">已有2万+人评价</div>
                        </a>
                    </li>
                </ul>
            </div>    
        </div>
        <!-- 查询结果列表 结束 -->
        <ul class="pagination w">
            <li>&lt;上一页</li>
            <li>1</li>
            <li class="current">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>下一页&gt;</li>
        </ul>
    </div>
    

    <!-- 脚部区域 -- start -->
    <div class="footer">
        <div class="w">
            <!-- 上方服务 -->
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-banshou"></span>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tian"></span>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-tianbaotui"></span>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-liwu"></span>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="iconfont icon-weizhi"></span>
                            680家售后网点
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 中间帮助 -->
            <div class="footer-help">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
			 		<dd> <a href="#">购物流程 </a></dd>
			 		<dd> <a href="#">会员介绍 </a></dd>
			 		<dd> <a href="#">生活旅行 </a></dd>
			 		<dd> <a href="#">常见问题 </a></dd>
			 		<dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="#">售后服务</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">礼券码</a></dd>
                    <dd><a href="#">团购服务</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">微信支付</a></dd>
                    <dd><a href="#">支付宝支付</a></dd>
                    <dd><a href="#">银联卡支付</a></dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">微信公众号</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                </dl>
                <div  class="app-download">
                    <h3>帮助中心</h3>
                    <div>
                        <img src="./img/erweima.png" alt="">
                        <p>App下载</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 下方版权 -->
        <div class="footer-copyright">
                <p class="copyright_links">
                    关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  友情链接  |  销售联盟  |  English Site  |  Contact U
                </p>
                <p class="copyright_info">
                    地址：西安市雁塔区旺座SOHO 邮编：721000 电话：400-666-8888 传真：029-86868686 邮箱: zsf@163.com  <br>
                    陕ICP备06980110号陕公网安备61030216812
                </p>
        </div>

    </div>
    <!-- 脚部区域 -- end -->

    <script src="./js/common.js"></script>
</body>
</html>